<?php
$base = "http://" . $_SERVER['SERVER_NAME'];
?>
<script>
    var cityObj = eval('( <?= $this->allCity ?> )');
    var stateObj = eval('( <?= $this->allStates ?> )');
    var brandStateObj = eval('(<?= $this->brandsWithStateId ?>)');

    $(function() {

        //highlight parent menu
        $("ul li").each(function() {
            if ($(this).attr("key") == "<?= $this->parentMenuKey ?>") {
                $(this).addClass("active");
            }
        });

        ////defaults        
        $("select[name='state']").append("<option value='0'>Please Select</option>");
        $("select[name='city']").append("<option value='0'>Please Select</option>");
        enaDisableAddressOptions(true);
        $("input[name='zip']").prop('disabled', true);


        /////state.........
        //for (var i = 0; i < stateObj.length; i++) { //state
        //    $("select[name='state']").append("<option value=" + stateObj[i].id + ">" + stateObj[i].name + "</option>");
        //}


        //enable options
        $("input[name='searchOption1']").click(function() {
            var selectedVal = $(this).val();
            switch (selectedVal) {
                case "state":
                    enaDisableAddressOptions(false);
                    $("input[name='zip']").prop('disabled', true);
                    //load state by brand
//                    var brandVal = $("select[name='brand']").val();                    
//                    loadStateByBrandId(brandVal);
                    break;
                case "zip":
                    enaDisableAddressOptions(true);
                    $("input[name='zip']").prop('disabled', false);
                    break;
            }
        });

        // Block non-numeric chars.
        $(document).on('keypress', 'input[name=zip]', function(event) {
            return (((event.which > 47) && (event.which < 58)) || (event.which == 13));
        });

        //on select load state for brand
        $("select[name='state']").mousedown(function() {
            var brandVal = $("select[name='brand']").val();
            loadStateByBrandId(brandVal);
        });

        //submit
        $("input[name='submit']").click(function() {
            var verified = true;
            var selectedRadioVal = $('input[name=searchOption1]:checked', '#myForm').val();
            if (selectedRadioVal == undefined) {
                alert("You must select either search by Address or postcode option.");
                return false;
            }
            switch (selectedRadioVal) {
                case "state":
                    if ($("select[name='state']").val() == 0) {
                        alert("You must select State..!!!");
                        verified = false;
                    } else {
                        if ($("select[name='city']").val() == 0) {
                            alert("You must select City..!!!");
                            verified = false;
                        }
                    }
                    break;
                case "zip":
                    var zipCodeLength = $("input[name='zip']").val().length;
                    if (zipCodeLength == 0) {
                        alert("You must enter postcode.");
                        verified = false;
                    } else if (zipCodeLength !== 6) {
                        alert("Post code must be of 6 digits.");
                        verified = false;
                    }
                    break;
            }
            if (verified && $("select[name='brand']").val() == 0) {
                alert("You must select brand");
                verified = false;
            }

            return verified;
        });


        //load city
        $("select[name='state']").change(function() {
            var id = $(this).find("option:selected").attr('value');
            $("select[name='city']").empty();
            $("select[name='city']").append("<option value=''>Select City</option>");
            for (var i1 = 0; i1 < cityObj.length; i1++) {  //city              
                if (cityObj[i1].state_id === id) {
                    $("select[name='city']").append("<option value=" + cityObj[i1].id + ">" + cityObj[i1].name + "</option>");
                }
            }
        });

        $("select[name='brand']").change(function() {
            $("select[name='state']").empty();
            $("select[name='city']").empty();
            $("select[name='state']").append("<option value='0'>Please Select</option>");
            $("select[name='city']").append("<option value='0'>Please Select</option>");
        });

    });


    /**
     * 
     * @param {type} storeId
     * @returns {undefined}
     */
    function setStoreInNoty(storeId) {
        $("#myModal1 .modal-body").html("<iframe id='modal1Iframe' src='<?= $base ?>/send/message/" + storeId + "' style='width: 100%; border: 0; overflow-y: hidden; height: 340px;'></iframe>");
        //$("#myModal1 #modal1Iframe").contents().find("input[name='storeId']").val(storeId);
    }


    /**
     * 
     * @param {type} option
     * @returns {undefined}
     */
    function enaDisableAddressOptions(option) {
        $("select[name='state']").prop('disabled', option);
        $("select[name='city']").prop('disabled', option);
    }

    /**
     * 
     * @param {type} brandId
     * @returns {undefined}
     */
    function loadStateByBrandId(brandId) {
        $("select[name='state']").empty();
        $("select[name='state']").append("<option value='0'>Please Select</option>");
        var stateId = 0;
        for (var i = 0; i < brandStateObj.length; i++) {
            if (brandId == brandStateObj[i].brand_id) {
                stateId = brandStateObj[i].state_id;
                loadStateByStateId(stateId);
            }
        }
    }

    /**
     * 
     * @param {type} stateId
     * @returns {undefined}
     */
    function loadStateByStateId(stateId) {
        for (var i = 0; i < stateObj.length; i++) { //state
            if (stateObj[i]['id'] == stateId) {
                $("select[name='state']").append("<option value=" + stateObj[i].id + ">" + stateObj[i].name + "</option>");
            }
        }
    }


    /**
     * 
     * @param {type} title
     * @param {type} mapLink
     * @returns {undefined}
     */
    function loadMap(title, mapLink) {
        $("#myModalLabel").text("Location");
        $("#myModal .modal-body").html("");
        var link = "";
        if (mapLink.match("http")) {
            link = "<iframe width='565' height='350' frameborder='0' scrolling='no' marginheight='0' marginwidth='0' src='" + mapLink + "'></iframe><br />";
        } else {
            link = "<h3>Google Map Location not specified.</h3>";
        }
        $("#myModalLabel").text(title + "\'s location on Google Map");
        $("#myModal .modal-body").html(link);
    }
</script>
<style>
    input[type=radio], input.radio { float:left; clear:none; }
</style>
<div id="view-content">
    <div class="row-fluid">        
        <div class="span12 well">
            <!--<div class="span1"></div>-->
            <form id="myForm" method="post">                
                <div class="span4 well" style="min-height: 206px;">
                    Choose your Brand<br>
                    <select class="span12" name="brand" required="required">
                        <option value="0">Select Brand</option>
                        <?php foreach ($this->allBrands as $brandValue) { ?>
                            <option value="<?= $brandValue['id'] ?>"><?= $brandValue['name'] ?></option> 
                        <?php }
                        ?>
                    </select>                    
                </div>   
                <div class="span4 well">
                    <fieldset>
                        <legend> <label class="radio"> <input type="radio" value="state" name="searchOption1"/> Search By Address</label> </legend>
                        Select a state
                        <select class="span12" name="state"></select><br>
                        Select a city
                        <select class="span12" name="city"></select>
                    </fieldset>
                </div>                           
                <div class="span4 well" style="min-height: 206px;">
                    <fieldset>
                        <legend> <label class="radio"> <input type="radio" value="zip" name="searchOption1"/> Search By postcode</label> </legend>
                        Enter your postcode<br>
                        <input type="text" name="zip" class="span12" />
                    </fieldset>
                </div>
                <input  type="submit" name="submit" value="Search" class="btn btn-info btn-large" />
            </form>
        </div>
        <?php
        if (!$this->resultAvail) {
            ?> 
            <div class="alert alert-danger">
                Sorry we could not find a store for your searched criteria.
            </div> 
            <?php
        }

        #show selected form   

        if ($this->isSearched) {
            #mark radio selected 
            ?>
            <script>
                $(function() {
                    $("select[name='brand']").val(<?= $this->searchFormValues['brand'] ?>);
                    $("input[name='searchOption1']").filter('[value=<?= $this->searchFormValues['searchOption1'] ?>]').click();
                });
            </script>
            <?php if ($this->searchFormValues['searchOption1'] == "state") { ?>
                <script>
                    $(function() {
                        loadStateByBrandId(<?= $this->searchFormValues['brand'] ?>);
                        $("select[name='state']").val(<?= $this->searchFormValues['state'] ?>);
                        $("select[name='city']").empty();
                        $("select[name='city']").append("<option value=''>Select City</option>");
                        for (var i2 = 0; i2 < cityObj.length; i2++) {  //city              
                            if (cityObj[i2].state_id == <?= $this->searchFormValues['state'] ?>) {
                                $("select[name='city']").append("<option value=" + cityObj[i2].id + ">" + cityObj[i2].name + "</option>");
                            }
                        }
                        $("select[name='city']").val(<?= $this->searchFormValues['city'] ?>);
                    });
                </script>
            <?php } else { ?>
                <script>
                    $("input[name='zip']").val(<?= $this->searchFormValues['zip'] ?>);
                </script>
            <?php }
            ?>


            <?php
        }#end of isSearched
        #show output

        if ($this->searchedArrayResult != null) {
            ?>
            Your selected brand: <img src="http://<?= $_SERVER['SERVER_NAME'] ?>/uploads/brands/<?= $this->brandImage ?>" style="max-width: 100px; max-height: 100px;" />
            <div class="searched-output">
                <table class="table">                
                    <?php
                    $index = 1;
                    foreach ($this->searchedArrayResult as $store) :
                        ?>
                        <tr class="well">
                            <td><h1><?= $index ?></h1></td>
                            <td>
                                <div class="span4">
                                    <address>
                                        <!--<h4 style="font-size: 11px;"><?= $store['store_name'] ?></h4>-->
                                        <b><?= $store['store_name'] ?></b><br>
                                        <?= $store['address1'] ?> <?= $store['address2'] ?><br>                                        
                                        <?= $store['location']['city']['name'] ?>,
                                        <?= $store['location']['state']['name'] ?>,
                                        PIN <?= $store['location']['zipcode']['code'] ?>                                        
                                    </address>
                                </div>
                                <div class="span4">
                                    <b>Email: </b> <?= $store['email'] ?><br>
                                    <b>Contact: </b> <?= $store['contact1'] ?>, <?= $store['contact2'] ?><br><br>                                    
                                </div>
                                <div class="span4">                                    
                                    <a id="loadmap" onclick="loadMap('<?= $store['store_name'] ?>', '<?= $store['map'] ?>');" class="btn btn-info" title="View location on map" href="#myModal" role="button" data-toggle="modal"><i class="icon-white icon-map-marker"></i> View Location on Map</a><br><br>                                    
                                    <!--<a class="btn" href="<?= $this->url(array('id' => $store['store_id']), 'send-msg'); ?>"><i class="icon-share-alt"></i> Send details to your mail/sms</a>-->
                                    <a class="btn btn-info" href="#myModal1" onclick="setStoreInNoty(<?= $store['store_id'] ?>)" role="button" data-toggle="modal"><i class="icon-white icon-share-alt"></i> Send details to your mail/sms</a>
                                </div>
                            </td>
                        </tr>
                        <?php
                        $index++;
                    endforeach;
                    ?>
                </table>
            </div>
            <?php
        }
        ?>
    </div>
</div>
<div id="myModal" class="modal hide fade" style="width: 600px;" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
        <h3 id="myModalLabel">Location</h3>
    </div>
    <div class="modal-body"></div>
</div>


<div id="myModal1" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" style="min-height: 60%;">
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
        <h3 id="myModalLabel">Send Store Details to your Email/Mobile</h3>
    </div>
    <div class="modal-body">        
    </div>    
</div>